<template>
    <div class="sss">
    <div v-for="(item,index) in list" :key="index" class="room" :style="'background-image: url('+item.backgroundimg+')'" >
        <div class="room-main">
            <img class="room-img" :src="item.headicon">
            <p>{{item.title}}</p>
            <span>{{item.lins}}</span>
        </div>
    </div>
    </div>
</template>
<script>
    export default {
    props:[
        "list"
    ]
    }
</script>
<style scoped >
    .sss{
        display: flex;
       position: relative;
        justify-content: space-between;
         flex-wrap: wrap;
        padding: 0px 3.5vw;
    }
    .room{
      
        width: 45vw;
        border-radius: 10px;
        margin: 2.5vw 0px;
        box-sizing: border-box;
        height: 40vw;
        background-size: 100% 100%;
      box-shadow: 0 0.8vw 0.8vw rgba(10,16,20,.24),0 0 0.8vw rgba(10,16,20,.12);
        position: relative;
    }
    .room-main{
        width: 100%;
        height: 35%;
        background: white;
        position: absolute;
        bottom: 0;
    }
    .room-img{
        border-radius: 50%;
        width: 13vw;
        height: 12vw;
        position: relative;
        top: -4.5vw;
        left:2vw;
        border: 0.2vw white solid;
    }
    .room-main p{
        position: absolute;
        left: 17vw;
        top: 3vw;
        color: rgb(204,204,204);
        font-size: 3.5vw;
    }
    .room-main span{
        color: rgb(103,103,103);
        font-size: 3.5vw;
        position: absolute;
        top: 8vw;
        left: 4vw;
    }
</style>